<template>
  <div class="app-container">
    <div>
      <el-button icon="el-icon-plus" type="primary" round  @click="insertMenu">添加</el-button>
    </div>
    <el-table
        :data="menu"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
        prop="id"
        label="ID">
        </el-table-column>
        <el-table-column
        prop="title"
        label="名称">
        </el-table-column>
        <el-table-column
        prop="icon"
        label="图标">
        <!-- <template slot-scope="scope"></template> 定义插槽 自定义信息时-->
        <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
        </template>
        </el-table-column>
        <el-table-column
        prop="type"
        label="类型">
            <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.type===0">目录</el-tag>
            <el-tag type="danger" v-else-if="scope.row.type===1">菜单</el-tag>
            <el-tag  v-else>按钮</el-tag>
            </template>
        </el-table-column>
        <el-table-column
        prop="parentName"
        label="上级菜单">
        </el-table-column>
        <el-table-column
        prop="url"
        label="菜单url">
        </el-table-column>
        <el-table-column
        prop="perm"
        label="授权标识">
        </el-table-column>
        <el-table-column
        prop="orderNum"
        label="排序">
        </el-table-column>
        <el-table-column
        label="操作"
        width="180">
        <template slot-scope="scope">
            <el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row.id,scope.row.type)" >编辑</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="delet(scope.row.id,scope.row.title)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <edit-menus ref="editShow" @refresh="goto"></edit-menus>
    <insert-menus ref="insertShow" @refresh="goto"></insert-menus>
  </div>
</template>

<script>
import EditMenus from '@/components/menus/EditMenus.vue'
import InsertMenus from '@/components/menus/InsertMenus.vue'
import http from '@/utils/request'
export default {
  name: 'ThreeIndex',
  components:{
    EditMenus,
    InsertMenus
  },
  data() {
    return {
       menu:[]
    }
  },

  mounted() {
    this.goto()
  },

  methods: {
    goto(){
      http.get('/menu/multistageMenus')
        .then(res => {
        console.log(res.data.data);
        this.menu=res.data.data
      })  
    },
    async delet(id,name){
        try {
          await this.$confirm(`你确定要删除 ${name} 吗?`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          // 代码能下来，表示用户点击了确认按钮
          await http.delete(`/menu/${id}`)
          // 给用户一个提示的消息
          this.$message({
              message: '数据删除成功',
              type: 'success'
          })
          //刷新再查询
          this.goto()
        }catch(err) {
          console.log(err)
        }
    },    
    edit(id,type){
      //console.log(id)
      //console.log(type)
      this.$refs.editShow.$data.dialogTableVisible = true
      this.$refs.editShow.$data.type = type
      http.get(`/menu/${id}`)
        .then(res =>{
            console.log(res.data.data)
            this.$refs.editShow.$data.menus = res.data.data
        })
    //   http.get(`/menu/parent/${id}`) 
    //     .then(res => {
    //         console.log(res.data.data)
    //         this.$refs.editShow.$data.parents = res.data.data
    //     }) 
    },
    insertMenu(){
      //console.log(this.$refs.insertShow.$data.dialogTableVisible);
      this.$refs.insertShow.$data.dialogTableVisible = true  
      
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
